'use client';

import React from 'react';
import Card from '@/components/ui/Card';
import Badge from '@/components/ui/Badge';
import Button from '@/components/ui/Button';
import { 
  BrainCircuit, 
  Database, 
  Activity,
  Cloud,
  Zap,
  AlertTriangle,
  BarChart3
} from 'lucide-react';

export default function DashboardPage() {
  const stats = [
    {
      label: '运行中模型',
      value: '12',
      icon: BrainCircuit,
      color: 'text-blue-600',
      bgColor: 'bg-blue-100',
      change: '+2',
      changeType: 'increase'
    },
    {
      label: '训练任务',
      value: '8',
      icon: Activity,
      color: 'text-green-600',
      bgColor: 'bg-green-100',
      change: '+3',
      changeType: 'increase'
    },
    {
      label: '数据集总数',
      value: '156',
      icon: Database,
      color: 'text-purple-600',
      bgColor: 'bg-purple-100',
      change: '+12',
      changeType: 'increase'
    },
    {
      label: '云边节点',
      value: '24',
      icon: Cloud,
      color: 'text-orange-600',
      bgColor: 'bg-orange-100',
      change: '0',
      changeType: 'stable'
    }
  ];

  const recentTasks = [
    {
      id: 1,
      name: '人员作业识别模型训练',
      status: 'running',
      progress: 75,
      startTime: '2024-12-03 09:30',
      estimatedEnd: '2024-12-03 14:30'
    },
    {
      id: 2,
      name: '设备缺陷识别增量学习',
      status: 'completed',
      progress: 100,
      startTime: '2024-12-03 08:00',
      estimatedEnd: '2024-12-03 12:00'
    },
    {
      id: 3,
      name: '环境隐患识别协同优化',
      status: 'pending',
      progress: 0,
      startTime: '2024-12-03 15:00',
      estimatedEnd: '2024-12-03 18:00'
    }
  ];

  const systemAlerts = [
    {
      id: 1,
      type: 'warning',
      message: 'GPU-Server-01 内存使用率达到 85%',
      time: '10分钟前'
    },
    {
      id: 2,
      type: 'info',
      message: '模型 PowerNet-v2.1 发布成功',
      time: '1小时前'
    },
    {
      id: 3,
      type: 'error',
      message: '边缘节点 Edge-03 连接异常',
      time: '2小时前'
    }
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'running':
        return <Badge variant="info">运行中</Badge>;
      case 'completed':
        return <Badge variant="success">已完成</Badge>;
      case 'pending':
        return <Badge variant="warning">待执行</Badge>;
      default:
        return <Badge variant="default">{status}</Badge>;
    }
  };

  const getAlertIcon = (type: string) => {
    switch (type) {
      case 'warning':
        return <AlertTriangle className="h-4 w-4 text-yellow-500" />;
      case 'error':
        return <AlertTriangle className="h-4 w-4 text-red-500" />;
      default:
        return <Zap className="h-4 w-4 text-blue-500" />;
    }
  };

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between rounded-lg px-4 py-3">
        <div>
          <h1 className="text-xl font-bold text-gray-900">总览仪表盘</h1>
          <p className="text-sm text-gray-600 mt-0.5">实时监控系统状态和进化任务执行情况</p>
        </div>
        <Button variant="primary" size="sm">
          <BarChart3 className="h-4 w-4 mr-1.5" />
          生成报告
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <Card key={index} className="hover:shadow-md transition-shadow">
            <div className="flex items-center">
              <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${stat.bgColor}`}>
                <stat.icon className={`h-6 w-6 ${stat.color}`} />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">{stat.label}</p>
                <div className="flex items-center">
                  <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                  <span className={`ml-2 text-sm ${
                    stat.changeType === 'increase' ? 'text-green-600' : 
                    stat.changeType === 'decrease' ? 'text-red-600' : 'text-gray-600'
                  }`}>
                    {stat.changeType === 'increase' && '+'}
                    {stat.change}
                  </span>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* 最近任务 */}
        <Card title="最近训练任务" subtitle="查看当前运行的模型训练任务">
          <div className="space-y-4">
            {recentTasks.map((task) => (
              <div key={task.id} className="rounded-lg border border-gray-200 p-4">
                <div className="flex items-center justify-between mb-2">
                  <h4 className="font-medium text-gray-900">{task.name}</h4>
                  {getStatusBadge(task.status)}
                </div>
                <div className="flex items-center justify-between text-sm text-gray-600 mb-2">
                  <span>开始时间: {task.startTime}</span>
                  <span>预计完成: {task.estimatedEnd}</span>
                </div>
                {task.status === 'running' && (
                  <div>
                    <div className="flex justify-between text-sm text-gray-600 mb-1">
                      <span>进度</span>
                      <span>{task.progress}%</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div 
                        className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                        style={{ width: `${task.progress}%` }}
                      />
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </Card>

        {/* 系统告警 */}
        <Card title="系统告警" subtitle="查看最新的系统告警信息">
          <div className="space-y-3">
            {systemAlerts.map((alert) => (
              <div key={alert.id} className="flex items-start space-x-3 p-3 rounded-lg bg-gray-50">
                {getAlertIcon(alert.type)}
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-gray-900">{alert.message}</p>
                  <p className="text-xs text-gray-500 mt-1">{alert.time}</p>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* 系统资源监控 */}
      {/* <Card title="系统资源监控" subtitle="实时监控云边节点资源使用情况">
        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          <div className="text-center">
            <div className="text-3xl font-bold text-blue-600 mb-2">76%</div>
            <div className="text-sm text-gray-600">CPU 使用率</div>
            <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
              <div className="bg-blue-600 h-2 rounded-full" style={{ width: '76%' }} />
            </div>
          </div>
          <div className="text-center">
            <div className="text-3xl font-bold text-green-600 mb-2">62%</div>
            <div className="text-sm text-gray-600">内存使用率</div>
            <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
              <div className="bg-green-600 h-2 rounded-full" style={{ width: '62%' }} />
            </div>
          </div>
          <div className="text-center">
            <div className="text-3xl font-bold text-purple-600 mb-2">89%</div>
            <div className="text-sm text-gray-600">GPU 使用率</div>
            <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
              <div className="bg-purple-600 h-2 rounded-full" style={{ width: '89%' }} />
            </div>
          </div>
        </div>
      </Card> */}
    </div>
  );
}